:host {
  display: inline-block; width: 128px; height: 128px; --border-color: #d1d1d1; --border-radius: 0
}
container {
  display: block !important; width: 100%; height: 100%; position: relative; z-index: 100
}
container div.image {
  width: 100%; height: 100%; box-sizing: border-box; background: none center center no-repeat; background-color: #fff; background-size: cover; position: relative; z-index: 100; border: var(--border-color) 1px solid; border-radius: var(--border-radius)
}
container div.fileSelector,
container div.fileRemover {
  width: 100%; height: 100%; background: rgba(255, 255, 255, .3); display: flex; align-items: center; justify-content: center; opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 80; cursor: pointer; transition: opacity .2s ease
}
container div.fileSelector jtbc-svg,
container div.fileRemover jtbc-svg {
  display: block; width: 20%; height: auto; aspect-ratio: 1 / 1; min-width: 20px; max-width: 60px; min-height: 20px; max-height: 60px; --fore-color: #333
}
container div.fileSelector input.file {
  display: none
}
container div.fileRemover {
  display: none
}
container:hover div.fileSelector,
container:hover div.fileRemover {
  opacity: 1; z-index: 800
}
container div.mask {
  width: 100%; height: 100%; background: #dddddd; opacity: .3; position: absolute; top: 0px; left: 0px; z-index: -100
}
container.loaded div.fileSelector {
  display: none
}
container.loaded div.fileRemover {
  display: flex
}
container.disabled div.mask {
  z-index: 1000000
}
container.disabled:hover div.fileSelector {
  display: none
}